<template>
	<view class="content">
		<view class="list listBorder clearfix" @tap="changePersonImg">
			<view class="left">
				<span>头像</span>
			</view>
			<view class="right">
				<view class="jiantou">
					<img src="https://cdn.yueyangshuyuan.com/more.png" />
				</view>
				<view class="personImg">
					<img :src="headImgUrl" />
				</view>
			</view>
		</view>
		<view class="list listTest clearfix" @tap="changeName">
			<view class="leftTest">
				<span>用户名</span>
			</view>
			<view class="rightTest ">
				<view class="jiantou">
					<img src="https://cdn.yueyangshuyuan.com/more.png" />
				</view>
				<view class="personImg">
					<span>{{nickName}}</span>
				</view>
			</view>
		</view>
		<view class="list listTest clearfix" @tap="changeSex">
			<view class="leftTest">
				<span>性别</span>
			</view>
			<view class="rightTest ">
				<view class="jiantou">
					<img src="https://cdn.yueyangshuyuan.com/more.png" />
				</view>
				<view class="personImg">
					<span>{{sex}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sex:"",
				headImgUrl:"",
				nickName:"",
				dataJson:{},
				QiniuData: {
					  key: "", //图片名字处理
					  token: "", //七牛云token
				  },
				  qiniuaddr: "https://cdn.yueyangshuyuan.com/", // 七牛云的图片外链地址 你的七牛云里配置有
				  bucket:'sojour',
			}
		},
		created() {
			this.$api.upToken({
			   accessKey:'i5zelMCxFeu45ob45iFOBdWPvOTraza1wXvWAg73',
			   secretKey:'leGRrXl_Kr5aXuxKQ7laa6jrZvzxgs6LGeOCfrxW',
			   bucket:this.bucket
			}).then(json=>{
				// console.log(json,2222222222);
				this.QiniuData.token = json;
			})
		   this.$api.getUser({}).then(json=>{
			   // console.log(json.data,"8888888");
			   let sex=json.data.sex;
			   if(sex==0){
				   this.sex="";
			   }else {
				   this.sex=sex==1?'男':'女';
			   }
			   if(json.data.headImgUrl==null){
				   this.headImgUrl='https://cdn.yueyangshuyuan.com/personImg.png';
			   }else {
				    this.headImgUrl=json.data.headImgUrl;
			   }
			   console.log(this.headImgUrl,11111);
			   this.nickName=json.data.nickName;
		   });
		  
	    },
		methods:{
			//改变性别
			changeSex(){
				let _this=this;
				uni.showActionSheet({
				  itemList: ['男', '女'],
				  success (res) {
				    // console.log(res.tapIndex);// 0 男 1 女
					_this.sex=res.tapIndex;
					let sex="";
					if(res.tapIndex==0){
						_this.sex="男";
						sex=1;
					}else if(res.tapIndex==1){
						_this.sex="女";
						sex=2;
					}
					let data=_this.headImgUrl.split("://")[1];
					let data1=data.split("/")[1];
                    // console.log(data1,98899);/
					//setUser
					_this.$api.setUser({
						nickName:_this.nickName,
						sex:sex,
						headImg:data1
					}).then(json=>{
					    
					});
				  },
				  fail (res) {
				    // console.log(res.errMsg)  //点了取消
				  }
				})
			},
			//上传头像
			changePersonImg(){
				let _this=this;
				uni.chooseImage({
				  count: 1,
				  sizeType: ['original', 'compressed'],
				  sourceType: ['album', 'camera'],
				  success (res) {
				    const tempFilePaths = res.tempFilePaths;
					let token=uni.getStorageSync('token');
					let upToken=_this.QiniuData.token;
					// console.log(_this.$api.baseUrlBackUrl(),8888888);
					let url=_this.$api.baseUrlBackUrl();
					let urlPath="";
					if(url.indexOf("https://test.yueyangshuyuan.com")!=-1){  //测试服
						urlPath="https://test.yueyangshuyuan.com";
					}else {
						urlPath="https://yueyangshuyuan.com";
					}
					uni.uploadFile({
						  url: urlPath+"/sojourn/uploadWithToken", 
						  filePath: tempFilePaths[0],
						  name:"file",
						  header: {
						  'content-type': 'multipart/form-data',
						  "X-Token":token,
						  "upToken":upToken
						  }, 
						  success: function(res) {
							  // console.log(res.data,88888888888888);
							  let data=JSON.parse(res.data);
							  // console.log(data.domain,data.key);
							  // https://cdn.yueyangshuyuan.com/file
							  _this.headImgUrl=data.domain+""+'/'+data.key;
							  // console.log(_this.headImgUrl,8888888);
							  let sex=0;
							  if(_this.sex=="男"){
							  	sex=1;
							  }else if(_this.sex=="女"){
							  	sex=2;
							  }
							  // setUser
							  _this.$api.setUser({
							  	nickName:_this.nickName,
							  	sex:sex,
							  	headImg:data.key
							  }).then(json=>{
							  	
							  });
						  }
					})
					
					//uploadQiniu
					// _this.$api.uploadQiniu({
					// 	key:_this.QiniuData.key,
					// 	token:_this.QiniuData.token,
					// 	file:tempFilePaths[0]
					// }).then(json=>{
					// 	    console.log(json,88888888);
							
					// });
				  }
				})
			},
			//跳转到修改昵称页面
			changeName(){
				uni.redirectTo({
				    url: '/pages/userName/userName'
				});
			},
			//以下是时间戳函数
			getDate(){
				var myDate = new Date();
				//获取当前年
				var year = myDate.getFullYear();
				//获取当前月
				var month = myDate.getMonth() + 1;
				//获取当前日
				var date = myDate.getDate();
				var h = myDate.getHours(); //获取当前小时数(0-23)
				var m = myDate.getMinutes(); //获取当前分钟数(0-59)
				var s = myDate.getSeconds();
				//获取当前时间
				var now = year + '_' + this.conver(month) + "_" + this.conver(date) + "_" + this.conver(h) + '_' + this.conver(m) + "_" + this.conver(s);
				return now;
			},
			conver(s) {
					return s < 10 ? '0' + s : s;
			},
		},
	}
</script>

<style lang="scss">
	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		clear: both;
		zoom: 1;
	}
	.content {
		padding:0;
		margin:0;
		background: #fff;
	}
	body {
		background: #fff;
	}
	.listBorder {
		border-top: 2upx solid #E2E6EE;
	}
	.list {
		width:100%;
		padding:30upx 45upx;
		box-sizing: border-box;
		border-bottom: 2upx solid #E2E6EE;
		position: relative;
		.left {
			float: left;
			width:100upx;
			height:130upx;
			line-height: 130upx;
			font-size: 32upx;
			color: #777777;
		}
		.right {
			float: left;
			width:560upx;
			height:130upx;
			line-height: 130upx;
			.personImg {
				float: right;
				margin-right:40upx;
				img {
					display: block;
					width:130upx;
					height:130upx;
					border-radius:100%;
				}
			}
			.jiantou {
				float: right;
				height:100%;
				
				img {
					display: block;
					width:18upx;
					height:30upx;
					// margin-top:50upx;
					position: absolute;
					top:50%;
					margin-top:-15upx;
				}
			}
		}
		.leftTest {
			float: left;
			width:100upx;
			height:45upx;
			line-height: 45upx;
			font-size: 32upx;
			color: #777777;
		}
		.rightTest {
			float: left;
			width:560upx;
			height:45upx;
			line-height: 45upx;
			position: relative;
			.personImg {
				float: right;
				margin-right:40upx;
			}
			.jiantou {
				float: right;
				height:100%;
				
				img {
					display: block;
					width:18upx;
					height:30upx;
					// margin-top:50upx;
					position: absolute;
					top:50%;
					margin-top:-15upx;
				}
			}
		}
	}
	.listTest {
		padding:60upx 45upx;
	}
</style>
